import React, { Component } from 'react'
import ImageView from '../ImageView/ImageView'
import cartStyle from './cartlist.module.scss'

export default class CartList extends Component {
  state = {
    cartList: '---',
  }
  // 子组件 return true false不渲染后面的内容
  shouldComponentUpdate(props) {
    console.log(props.item.number)
    if (props.item.number > 5) {
      return false
    } else {
      return true
    }
  }
  render() {
    const {
      item: { productPic, id, number, price, isSelected },
      handleReduceItem,
      handleAddItem,
      handleSelected, // 控制子组件的选中函数
    } = this.props

    console.log('isSelected:', isSelected)

    return (
      <div className={cartStyle['cartlist-wrapper']}>
        <div className={cartStyle['cartlist-check']}>
          <input
            type="checkbox"
            checked={isSelected}
            onChange={(e) => {
              console.log(e.target.checked)
              // 子传父 告诉父组件，我是哪一条数据，我是否被选中
              // this.setState({ checked: e.target.checked }, () => {
              // })
              handleSelected && handleSelected({ id, checked: e.target.checked })
            }}
          />
        </div>
        <div className={cartStyle['cartlist-left']}>
          <ImageView src={productPic} />
        </div>
        <div className={cartStyle['cartlist-right']}>
          <span>农夫山泉 NFC 100% 果汁</span>

          <span>{price.toFixed(2)}</span>

          {/* toFixed: 如何解决js浮点数计算问题 */}

          <button onClick={() => handleReduceItem && handleReduceItem(id)}>{'-'}</button>
          <span>{number}</span>
          <button onClick={() => handleAddItem && handleAddItem(id)}>{'+'}</button>
        </div>
      </div>
    )
  }
}
